import React, { createRef, useEffect } from "react";
import * as echarts from "echarts";
import "echarts-liquidfill";
import ReactECharts from "echarts-for-react"; // or var ReactECharts = require('echarts-for-react');
import classNames from "classnames";
import "./index.scss";

const getOption = (value) => {
  return {
    title: [
      {
        text: "",
        x: "center",
        y: "50%",
        textStyle: {
          color: "#262626",
          fontSize: 12,
          fontWeight: "normal",
        },
      },
    ],
    backgroundColor: "#fafbfd",
    series: [
      {
        type: "liquidFill",
        radius: "96%",
        center: ["50%", "50%"],
        color: ["#c8dcfe", "#3372FF"],
        data: [value, value], // data个数代表波浪数
        amplitude: 2,
        outline: {
          // 轮廓设置
          show: true,
          borderDistance: 3, // 边框与球中间间距
          itemStyle: {
            borderWidth: 2,
            borderColor: "#3372FF",
          },
        },
        // 图形样式
        itemStyle: {
          opacity: 1, // 波浪的透明度
          shadowBlur: 0, // 波浪的阴影范围
        },
        backgroundStyle: {
          borderWidth: 2,
          borderColor: "#fff",
          color: "#fff",
        },
        label: {
          show: true,
          textStyle: {
            color: "#262626",
            //   insideColor: "#12786f",
            fontWeight: 500,
            fontSize: 16,
          },
        },
      },
    ],
  };
};
export const LiquidFill = ({
  className,
  value,
}: {
  className?: string;
  value: number;
}) => {
  const ref = createRef<HTMLDivElement>();
  useEffect(() => {
    if (!ref.current) return;
    const chart = echarts.init(ref.current);
    chart.setOption({
      series: [
        {
          type: "liquidFill",
          data: [0.6],
        },
      ],
    });
  }, []);
  return (
    <div className={classNames("liquid-fill-wrapper", className)}>
      {/* <div ref={ref}></div> */}
      <ReactECharts
        option={getOption(parseFloat(value + ""))}
        notMerge
        lazyUpdate
      />
    </div>
  );
};
